<!-- 鰼国故里 -->
<template>
  <div class="about">

<!-- 人文历史 -->
    <div class="birthlandHistory">
      <img style="width: 80%; height: 94px" :src="require('_as/title-1.png')" alt="">

      <img-zoom :showImg='1' :imgZoomData="imgZoomData[0]" @toImgZoomDetails="toImgZoomDetails">
        <img class="historyImg" style="marginLeft: 120px" slot="imgRight" :src="require('_as/title-3.jpg')" alt="">
      </img-zoom>

      <div class="btn" @click="tohistoryMoreHistory">
        <span>查看更多</span>
      </div>
    </div>

<!-- 民风民俗 -->
    <div class="birthlandHistory">
      <img style="width: 80%; height: 94px" :src="require('_as/title-2.png')" alt="">

      <img-zoom :showImg='1' :imgZoomData="folkCustomImgZoomData[folkCustomNum]" @toImgZoomDetails="toImgZoomDetailsCustom">
        <img style="marginRight: 80px" slot="imgLeft" :src="require('_as/title-4.png')" alt="">
        <span slot="imgRight">
          <custom-tab  :tabs="customtabData" :homeImg="customHomeImg" :homeImgBg="customHomeImg1" @tabClick="customTabClick"></custom-tab>
        </span>
      </img-zoom>

      <div class="btn" @click="tohistoryMore">
        <span>查看更多</span>
      </div>
    </div>

  </div>
</template>

<script>
import ImgZoom from '_c/imgZoom/img_zoom'
import CustomTab from '_c/customTab/custom_tab'

import test from '_as/title-3.png'
import customHomeImg from '_as/guli-2-10.png'
import customHomeImg1 from '_as/guli-2-11.png'

export default {
  name: 'Birthland',
  data () {
    return {
      imgZoomData: [
        {
          id: '1',
          title: '历史名人',
          imgZoom: test,
          contentSpan: '流年似水,红尘滚滚,埋没了多少英雄传说;铁马冰河,鼓角金鸣,记述了多少传奇故事!...'
        }
      ],
      folkCustomImgZoomData: [
        {
          id: '1',
          title: '赶苗场',
          imgZoom: test,
          contentSpan: '集会当天，连汉族群众也敲锣打鼓到苗场助兴，并耍龙舞狮以示庆贺。苗族群众穿上节日盛装以示隆重，男青年带上芦笙和近两米长的腰鼓，女青年带上心爱的信物，围成圈，尽情欢跳对歌。互有好感的男女，则悄然独处，单独交流，互赠信物。'
        },
        {
          id: '2',
          title: '红头苗族婚俗',
          imgZoom: test,
          contentSpan: '良村镇民主村民组居住红头苗族一百多户，其婚俗大约至南宋以来变化不大，是一个富有浓郁民族特色的礼仪形式，蕴藏了文化民俗资料。'
        }
      ],
      customHomeImg,
      customHomeImg1,
      folkCustomNum: 0,
      customtabData: [
        {
          id: '1',
          tabIndex: 0,
          tabTitle: '赶苗场'
        },
        {
          id: '2',
          tabIndex: 1,
          tabTitle: '红头苗族婚俗'
        }
      ]
    }
  },
  components: {
    ImgZoom,
    CustomTab
  },
  created () {},
  methods: {
    toImgZoomDetails (item) {
      this.$router.push('/horizontal_tab/1-4')
    },
    toImgZoomDetailsCustom (item) {
      this.$router.push('/horizontal_tab/1-5')
    },
    tohistoryMore () {
      this.$router.push('/horizontal_tab/1-5')
    },
    tohistoryMoreHistory () {
      this.$router.push('/horizontal_tab/1-1')
    },
    customTabClick (item) {
      this.folkCustomNum = item.tabIndex
    }
  }
}
</script>

<style lang="stylus" scoped>
.birthlandHistory {
  position relative
  margin-top 100px
  .btn {
    position absolute
    bottom 20px
    left 45%
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 10px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
}

.historyImg {
  width 370px
  height 370px
  border-radius 50%
  overflow hidden
}
</style>
